<script setup lang="ts">
import { IGoodComment, OrderInfoSpec } from '@/service/api/type/goods.type';
import GoodsCommentImage from './goods-comment-image.vue';

const props = defineProps<{
  list: IGoodComment
}>()

const formatSpecs = (specs: OrderInfoSpec[]) => {
  return specs.reduce((p, c) => `${p} ${c.name}：${c.nameValue}`, '').trim()
}
const formatNickname = (nickname: string) => {
  return nickname.substring(0, 1) + '****' + nickname.substring(-1)
}

</script>

<template>
  <div class="list">
    <div class="item">
      <div class="user">
        <img :src="list.member.avatar" />
        <span>{{ formatNickname(list.member.nickname) }}</span>
      </div>
      <div class="body">
        <div class="score">
          <i class="iconfont icon-wjx01" v-for="i in list.score"></i>
          <i class="iconfont icon-wjx02" v-for="i in 5 - (list.score)"></i>
          <span class="attr">{{ formatSpecs(list.orderInfo.specs) }}</span>
        </div>
        <div class="text">{{ list.content }}</div>
        <GoodsCommentImage v-if="list.pictures.length" :pictures="list.pictures"></GoodsCommentImage>
        <div class="time">
          <span>{{ list.createTime }}</span>
          <span class="zan">
            <i class="iconfont icon-dianzan">{{ list.praiseCount }}</i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.list {
  padding: 0 20px;
  .item {
    display: flex;
    padding: 25px 10px;
    border-bottom: 1px solid #f5f5f5;
    .user {
      width: 160px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
      span {
        padding-left: 10px;
        color: #666;
      }
    }
    .body {
      flex: 1;
      .score {
        line-height: 40px;
        .iconfont {
          color: #ff9240;
          padding-right: 3px;
        }
        .attr {
          padding-left: 10px;
          color: #666;
        }
      }
    }
    .text {
      color: #666;
      line-height: 24px;
    }
    .time {
      color: #999;
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
  }
}
</style>
